<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="parameters" class="demo-form-inline">
        <el-form-item label="售后单号">
          <el-input v-model="parameters.aftersales_id" placeholder="请输入售后单号"></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="parameters.order_id" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号">
          <el-input v-model="parameters.mobile" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="parameters.status" placeholder="请选择" @change="opcTwo">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" align="center" label="序号" :index="indexMethod" width="80">
        </el-table-column>
        <el-table-column prop="aftersales_id" align="center" label="售后单号" width="180">
        </el-table-column>
        <el-table-column prop="order_id" align="center" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="address" align="center" label="售后方式">
        </el-table-column>
        <el-table-column prop="utime" align="center" label="申请时间" width="180">
        </el-table-column>
        <el-table-column prop="address" align="center" label="支付方式">
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="用户名称">
        </el-table-column>
        <el-table-column prop="address" align="center" label="用户手机号">
        </el-table-column>
        <el-table-column prop="address" align="center" label="商品数量">
        </el-table-column>
        <el-table-column prop="address" align="center" label="订单金额">
        </el-table-column>
        <el-table-column prop="status_text" align="center" label="状态">
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">处理订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[10, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <span>
        <span>
          <h2>用户信息</h2>
        </span>
        <el-form ref="form" :model="gatherDate" label-width="100px">
          <div class="divWith">
            <el-form-item label="用户名" class="formMag">
              <el-input v-model="gatherDate.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用手机号">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <span>
              <h2>用户信息</h2>
            </span>
            <el-form-item label="收货人" class="formMag">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="收获地址">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="支付方式">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <span>
              <h2>用户信息</h2>
            </span>
            <el-form-item label="发票信息" class="formMag">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <span>
              <h2>售后信息</h2>
            </span>
            <el-form-item label="售后单号" class="formMag">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="售后类型">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="换货原因">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
              <el-input v-model="gatherDate.name"></el-input>
            </el-form-item>
            <el-form-item label="问题描述">
              <el-input type="textarea" :rows="2" v-model="gatherDate.name"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="问题图片">
            <span class="spanMag">
              <el-image style="width: 300px; height: 200px" :src="gatherDate.img" :preview-src-list="gatherDate.srcList">
              </el-image>
            </span>
            <el-image style="width: 300px; height: 200px" :src="gatherDate.img" :preview-src-list="gatherDate.srcList">
            </el-image>
          </el-form-item>
          <span>
            <h2>售后商品信息</h2>
          </span>
          <el-form-item label="需要换货商品">
            <el-table :data="barterData" max-height="600" border style="width: 100%">
              <el-table-column prop="date" align="center" label="商品名称" width="180">
              </el-table-column>
              <el-table-column prop="name" align="center" label="商品单位" width="180">
              </el-table-column>
              <el-table-column prop="address" align="center" label="购买数量">
              </el-table-column>
              <el-table-column prop="address" align="center" label="商品总价">
              </el-table-column>
              <el-table-column prop="address" align="center" label="商品状态">
              </el-table-column>
              <el-table-column prop="address" align="center" label="换货数量">
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="商品">
            <el-table :data="commodityData" max-height="600" border style="width: 100%">
              <el-table-column prop="date" align="center" label="商品名称" width="180">
              </el-table-column>
              <el-table-column prop="name" align="center" label="商品单位" width="180">
              </el-table-column>
              <el-table-column prop="address" align="center" label="购买数量">
              </el-table-column>
              <el-table-column prop="address" align="center" label="商品总价">
              </el-table-column>
              <el-table-column prop="address" align="center" label="商品状态">
              </el-table-column>
              <el-table-column prop="address" align="center" label="换货数量">
              </el-table-column>
            </el-table>
          </el-form-item>
          <div class="divFlex">
            <el-form-item label="送水照片">
              <el-image style="width: 300px; height: 200px" :src="gatherDate.img" :preview-src-list="gatherDate.srcList">
              </el-image>
            </el-form-item>
            <el-form-item label="回收空桶照片">
              <el-image style="width: 300px; height: 200px" :src="gatherDate.img" :preview-src-list="gatherDate.srcList">
              </el-image>
            </el-form-item>
          </div>
          <span>
            <h2>协商记录</h2>
          </span>
          <div style="height: 300px;" class="divMagi">
            <el-steps direction="vertical" :active="gatherDate.active">
              <el-step title="商家/平台处理中"></el-step>
              <el-step title="买家发起售后"></el-step>
            </el-steps>
          </div>
          <div class="DivFlex">
            <span>2023.08.09 07.05.29</span>
            <span class="spanWte">
              <el-form-item label="售后单号" class="formMag">
                <el-input v-model="gatherDate.name"></el-input>
              </el-form-item>
              <el-form-item label="售后类型">
                <el-input v-model="gatherDate.name"></el-input>
              </el-form-item>
              <el-form-item label="换货原因">
                <el-input v-model="gatherDate.name"></el-input>
              </el-form-item>
              <el-form-item label="申请时间">
                <el-input v-model="gatherDate.name"></el-input>
              </el-form-item>
            </span>
          </div>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="consent">同 意</el-button>
        <el-button type="success" @click="refuse">拒 绝</el-button>
        <el-button type="success" @click="backtrack">返 回</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { shouhouList } from "../../../../utils/api.js";
export default {
  data() {
    return {
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      //分页数据
      page: 1,
      limit: 10,
      total: 0,
      imgHeader: this.Global.imgHeader,

      parameters: {
        aftersales_id: "",
        order_id: "",
        mobile: "",
        status: "",
      },
      gatherDate: {
        active: 2,
      },
      barterData: [],
      commodityData: [],
      options: [
        {
          value: "1",
          label: "未审核",
        },
        {
          value: "2",
          label: "审核通过",
        },
        {
          value: "3",
          label: "审核拒绝",
        },
      ],
      type: "",
      tableData: [],
      variable: "",
    };
  },
  methods: {
    //搜索
    onSubmit() {
      this.getList();
    },
    //详情
    handleEdit(index, row) {
      this.variable = 1;
    },
    //处理
    handleDelete(index, row) {
      console.log(row);
      let obj = JSON.parse(JSON.stringify(row));
      this.barterData.nickname = obj.nickname;
      this.variable = 2;
      this.dialogVisible = true;
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    //序号
    indexMethod(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //同意
    consent() {
      this.$confirm("是否确定换货", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已同意",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作",
          });
        });
    },
    //拒绝
    refuse() {
      this.$prompt("拒绝原因说明", "拒绝换货", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "已拒绝换货: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该信息",
          });
        });
    },
    //返回
    backtrack() {
      console.log("333");
    },
    //状态
    opcTwo(e) {},
    //关闭
    handleClose(done) {
      done();
    },
    //列表数据
    getList() {
      this.loading = true;
      shouhouList(
        this.token,
        this.page,
        this.limit,
        this.parameters.status,
        this.type,
        this.parameters.aftersales_id,
        this.parameters.mobile,
        this.parameters.order_id
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            this.tableData.forEach((item) => {
              if (item.items) {
                item.items.forEach((item2) => {
                  item2.numsValue = item2.nums;
                });
              }
              item.Aimages = [];
              item.images.forEach((item2) => {
                item.Aimages.push(this.imgHeader + item2.image_id);
              });
              if (item.status == 1) {
                item.status_text = "未审核";
              }
              if (item.status == 2) {
                item.status_text = "审核通过";
              }
              if (item.status == 3) {
                item.status_text = "审核拒绝";
              }
              if (item.type == 1) {
                item.type_text = "未收到货";
              }
              if (item.type == 2) {
                item.type_text = "已收到货";
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            this.loading = false;
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          let timer = setTimeout(() => {
            this.loading = false;
            this.tableData = [];
            clearTimeout(timer);
            console.log(err);
          }, 10000);
        });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.formMag {
  margin-top: 20px;
}

.spanMag {
  margin-right: 30px;
}

.divWith {
  width: 70%;
}

.divFlex {
  display: flex;
}

.DivFlex {
  display: flex;
  align-items: center;
  margin-left: 1%;
}

.divMagi {
  margin-left: 130px;
}

.spanWte {
  width: 30%;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-button--success {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  padding: 23px 62px;
  margin: 20px 50px;
}
</style>